<template>
	<view>
		<view class="" style="width: 100vw;height: 100vh; ">
			<!-- <view  style="min-height: 100vh">
				<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
			<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh;overflow: hidden;">
				<hx-navbar title="衍生品奖励" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
					transparent="auto"></hx-navbar>
				<view class="container" :class="{'lubeijing':yanshengbgimage ==='black'}" style="">
					<!-- lvback :class="{'nolvback':yanshengbgimage ==='black'}-->
					<view class="zichan_mess"
						:class="[{ 'nolvback':yanshengbgimage !=='black'},{'lvback':yanshengbgimage ==='black'}]">
						<view class="zichan_my ">
							<image class="gold_image" v-if="gold" src="@/static/user/gold6.gif" mode=""></image>
							<image class="gold_image" v-else src="@/static/user/jing_gold.png" mode=""></image>
							<view class="my_mess ">
								衍生品资产（元）<image @click="wenClick()" src="@/static/index/white_wenhao.png"
									style="width: 27rpx;height:26rpx;margin-right: 10rpx;" mode=""></image>
								<view class="" style="" @tap="change_show_pass()">

									<n-icon name="attentionforbidfill" size="30" v-if="show_pass"
										color="#ffffff"></n-icon>
									<n-icon name="attentionfill" size="30" v-else color="#ffffff"></n-icon>
								</view>
							</view>
							<view class="property m-t-10 redColor">
								{{nextPeriod}}
							</view>
							<view class="property_mess m-t-10">
								<view class="p_1">
									<view class="p_name">
										历史总资产
									</view>
									<view class="p_num ">
										{{propertyNum}}
									</view>
								</view>

								<!-- 	<view class="p_1">
								<view class="p_name">
										累计收益
									</view>
									<view class="p_num">
										{{addUp}}
									</view>
								</view> -->
								<view class="p_1 yhk" @click="hfpayWalletClick()">
									<!-- <view class="p_name">
										银行卡

									</view>
									<view class="" style="font-weight: 600;display: flex;align-items: center;">
										去绑卡<image style="width: 30rpx;height: 36rpx;"
											src="@/static//user/arrow_right.png" mode=""></image>
									</view> -->
								</view>
							</view>
						</view>
					</view>
					<view
						:class="[{'lvlinearBackgroun':yanshengbgimage =='black'},{'purplelinearBackgroun':yanshengbgimage =='purple'}]"
						class="list_class" v-for="(item,index) in sellist" :key="index">
						<view class=""
							:class="[{'list_view':yanshengbgimage !=='black'},{'lv_list_view':yanshengbgimage ==='black'}]"
							style="">
							<view class="list_mess">
								<view class="list_m">
									<view>
										<view class="">
											<image class="image_sp" :src="item.mainImg" mode=""></image>
										</view>
									</view>
									<view class="xinxi">
										<view class="name_m"
											:class="[{'whiteColor':yanshengbgimage =='black'},{'blackColor':yanshengbgimage =='purple'}]">
											{{item.mainName}}
										</view>
										<view class="sum_m">
											<view class="" v-if="ktheme == 'purple'" style="color: #ff0004;">
												+{{item.price}}
											</view>
											<view class="sum_m_color" v-if="ktheme != 'purple'">
												+{{item.price}}
											</view>

										</view>
										<view class=""
											:class="[{'whiteColor':yanshengbgimage =='black'},{'blackColor':yanshengbgimage =='purple'}]">
											<view class="bianhao_m">
												编号：
												<text v-if='item.isHave==0'>未购买</text>
												<text v-else>{{item.tokenId}}</text>
											</view>
											<view class="shijian">
												收藏时间：<text v-if='item.isHave==0'>您未购买此商品</text>
												<text v-else>{{item.date.substring(0, 10)}}</text>
											</view>
										</view>

										<view class="xiaqi_m"
											:class="[{'whiteColor':yanshengbgimage =='black'},{'blackColor':yanshengbgimage =='purple'}]">
											【下期衍生奖励】
										</view>
									</view>
								</view>

							</view>
						</view>
						<view class="" v-if="ifsel===item.id"
							style="width: 550rpx;margin: 10rpx auto; border-top: 2px #575757 dashed;"></view>
						<view class="colselist" :class="{'whitebackground':yanshengbgimage !=='black'}"
							v-if="ifsel===item.id">
							<view class="colse_mess"
								:class="[{'whiteColor':yanshengbgimage =='black'},{'purpleColor':yanshengbgimage =='purple'}]">
								下期奖励展示
							</view>

							<view class="colse_image"
								:class="[{'blackborder':yanshengbgimage =='black'},{'purpleborder':yanshengbgimage =='purple'}]">
								<image :src="item.nextImg" @click="previewImage(item.ysp_image)" class="ys_image"
									mode="widthFix"></image>
							</view>
							<view class=""
								:class="[{'whiteColor':yanshengbgimage =='black'},{'blackColor':yanshengbgimage =='purple'}]">
								{{item.ysp_name}}
							</view>
							<view class="chakan_c" :style="{'background':buttonBcak}" @click="selMore(item)">
								点击查看更多
							</view>
							<view class="c_jiantou" @click="closegetList(!item.id)">
								<image src="@/static/user/menu_icon/top_jiantou.png" mode="" class="image_jaintou">
							</view>
							</image>
						</view>
						<view class="" v-else>

							<!-- 紫色 -->
							<view class="zhanshi" v-if="yanshengbgimage==='purple'">
								<image src="@/static/user/menu_icon/botton_jiantou.png" @click="selgetList(item.id)"
									mode="" class="image_jaintou">
								</image>
							</view>
							<!-- 黑色 -->
							<view class="black_zhanshi" v-else>
								<image src="@/static/user/menu_icon/botton_jiantou.png" @click="selgetList(item.id)"
									mode="" class="image_jaintou">
								</image>
							</view>
						</view>
						<view class="" style="height: 17rpx;" v-if="yanshengbgimage==='purple'"></view>
					</view>
					<view class="" style="height: 50rpx;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pNum: '0.00', //14503.23我的总资产
				nPeriod: "0.00", //108.05下期收益
				propertyNum: '******', //14503.23我的总资产
				nextPeriod: "******", //108.05下期收益
				addUp: "******", //108.05累计
				yanshengbgimage: true,
				buttonBcak: this.$store.state.buttonBcak, //按钮

				selStyle: {
					'--selectColorSize': this.$store.state.selectColorSize, //字体颜色
					'--backgroundColor': this.$store.state.kbackgroundColor,
				},
				show_pass: true,
				liushuivalue: 1, //流水下拉
				mingxivalue: 1, //明细下拉
				range: [{
						value: 4,
						text: "全部"
					}, {
						value: 0,
						text: "2024年3月"
					},
					{
						value: 1,
						text: "2024年6月"
					},
					{
						value: 2,
						text: "2024年9月"
					},
					{
						value: 3,
						text: "2024年12月"
					},
				],
				range2: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "玉璧"
					},
					{
						value: 2,
						text: "玉琮"
					},
				],
				sellist: [],
				gold: true, //动态金币图替换
				ifsel: '', //是否展开
			}
		},
		onPullDownRefresh() {
			this.getderivativeList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			//purple:紫色--- 否則黑色
			this.yanshengbgimage = this.$store.state.ktheme
			var _this = this
			setTimeout(function() {
				_this.gold = false
			}, 3000);
			this.getderivativeList()
		},
		methods: {
			//衍生品
			getderivativeList() {
				let data = {
					token: this.$db.get('userToken')
				}
				this.$api.getDerive(res => {
					if (res.status) {
						console.log('res----', res)
						if (res.data.deriveVOList) {
							this.sellist = res.data.deriveVOList
						}
						if (res.data.deriveAssetVO) {
							// *号
							this.pNum = res.data.deriveAssetVO.historyPrice //14503.23我的总资产
							this.nPeriod = res.data.deriveAssetVO.price //108.05下期收益
						}
					}
				})
			},
			previewImage(vimage) {
				uni.previewImage({
					current: vimage, // 当前显示图片的链接，不填则默认为 urls 的第一张  
					urls: [vimage] // 需要预览的图片链接列表  
				});
			},
			//查看更多
			selMore(val) {
				uni.navigateTo({
					// url: '/pages/user/ys_derive/ys_derive?name=' + val.name+'?image='+val.mainName+'?id='+val.id  
					url: `/pages/user/ys_derive/ys_derive?image=${val.mainImg}&mainName=${val.mainName}&iid=${val.id}&tokenId=${val.tokenId}`
				})
			},
			selgetList(val) {
				this.ifsel = val
			},
			closegetList(val) {
				this.ifsel = val
			},
			change(e) {
				//下拉框
			},
			//绑定银行卡
			hfpayWalletClick() {
				this.$api.hfpayWallet(res => {
					console.log("res--", res.data.redirect_url)
					if (res.status) {
						// //#ifdef H5
						// window.location.href = res.data.redirect_url
						// // #endif
						// //#ifdef APP-PLUS
						// plus.runtime.openURL(res.data.redirect_url)
						// console.log("res.data.redirect_url---",res.data.redirect_url)
						// // #endif 
						//#ifdef H5
						// uni.navigateTo({
						// 	url: '/pages/user/webview/webview?url=' + res.data.redirect_url
						// })
						window.location.href = res.data.redirect_url
						// #endif
						//#ifdef APP-PLUS
						let style = {
							statusbar: {
								background: "#ffffff",
							}
						}
						const wv = plus.webview.create(res.data.redirect_url, "", style);
						wv.show()
						//#endif
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			wenClick() {
				uni.showToast({
					title: '持仓衍生品价值总和',
					icon: 'none'
				});
			},
			change_show_pass: function() {
				this.show_pass = !this.show_pass
				console.log("this.show_pass--", this.show_pass)
				if (!this.show_pass) {
					this.propertyNum = this.pNum //我的总资产
					this.nextPeriod = this.nPeriod //下期收益
					//this.addUp = "108.05" //累计
				} else {
					this.propertyNum = '******' //我的总资产
					this.nextPeriod = '******' //下期收益
					//	this.addUp = '******' //累计
				}
			},
			tiaozhuan(id, image, shuliang, jiazhi) {
				uni.navigateTo({
					url: '/pages/user/schedule/schedule?id=' + id + '&image=' + image + '&shuliang=' + shuliang +
						'&jiazhi=' + jiazhi
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.blackborder {
		border: 10rpx solid #A3B665;
	}
	.purpleborder {
		border: 10rpx solid #8903D7FF;
	}
	.redColor {
		font-family: zcoolqingkehuangyouti;
		font-weight: 400;
		font-size: 80rpx;
		color: #F7FFF5;
		background: linear-gradient(0deg, #FFAB96 0%, #FF0F47 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.lvColor {
		color: var(--selectColorSize)
	}
	.whiteColor {
		color: white;
	}
	.purpleColor {
		color: var(--selectColorSize)
	}
	.blackColor {
		color: black;
	}
	.whitebackground {
		width: 630rpx;
		background-color: #fff;
	}
	.container {
		margin: 30rpx auto;
	}
	.lubeijing {
		width: 100vw;
		min-height: 93vh;
	}
	.nolvback {
		border: 1px solid #9c9c9c;
		background: var(--backgroundColor);
		box-shadow: 8rpx 8rpx 15rpx 1rpx #9c9c9c;
	}
	.lvback {
		background: url('@/static/user/yangsheng_xiaobeijng.png') no-repeat;
		background-size: 100% 100%;
	}
	.zichan_mess {
		width: 100%;
		height: 300rpx;
		margin: auto;
		border-radius: 20rpx;
		padding-top: 20rpx;
		position: relative;
		.gold_image {
			position: absolute;
			transform: scaleX(-1);
			top: -24rpx;
			right: -80rpx;
			width: 400rpx;
			height: 210rpx;
		}
		.zichan_my {
			width: 620rpx;
			height: 260rpx;
			background-size: 325rpx 205rpx; // 175rpx 135rpx;
			margin: 20rpx auto;
			background-repeat: no-repeat;
			background-position: right top;
			.my_mess {
				color: white; // gray;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 32rpx;
				.sel_image {
					width: 30rpx;
					height: 20rpx;
				}
			}
			.property {
				font-size: 56rpx;
				color: var(--selectColorSize);
			}
			.property_mess {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;

				.yhk {
					z-index: 10;
					width: 140rpx;
				}
				.p_name {
					color: white;
				}
				.p_num {
					margin-top: 10rpx;
					color: white; //color: var(--selectColorSize);
				}
			}
		}
	}

	.tab_list {
		width: 690rpx;
		margin: 20rpx auto;
		font-size: 27rpx;
		display: flex;
		justify-content: space-between;

		.tab_list_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 360rpx;

			/deep/.uni-select {
				border: none;
			}
		}

		.tab_list_2 {
			width: 296rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			/deep/.uni-select {
				border: 1px solid var(--selectColorSize);
				background-color: #fff;
				height: 60rpx;

			}
		}
	}

	//内容
	.list {
		width: 690rpx;
		margin: 20rpx auto;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow: 3rpx 6rpx 10rpx 1rpx #9c9c9c;

		.list_1 {


			display: flex;
			justify-content: space-between;

			.list_name {
				color: #000;
				font-weight: 500;
			}

			.list_num {
				color: var(--selectColorSize);
				font-weight: 500;
			}
		}

		.list_2 {
			margin-top: 14rpx;
			display: flex;
			justify-content: space-between;

			.list_date {
				font-size: 28rpx;
				color: gray;
			}

			.list_fenhong {
				text-decoration: underline;
			}
		}

	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}

	/deep/.uni-select__input-text {
		color: var(--selectColorSize) !important;
	}

	/deep/.uni-select__input-text {
		width: auto;
		padding-right: 12rpx;
	}
	//透明颜色

	.lvlinearBackgroun {
		width: 720rpx;
	}

	.purplelinearBackgroun {
		border-image: linear-gradient(0deg, #C1BFE6, #EA88DE) 4 4;
		background: linear-gradient(0deg, #D0C6F5 0%, #EABCAA 100%);
		clip-path: inset(0 round 10rpx);
		// border: 10rpx solid;
		width: 690rpx;
	}
	// 紫色小背景
	.list_view {
		border: 10rpx solid;
		border-image: linear-gradient(0deg, #C1BFE6, #EA88DE) 4 4;
		background: linear-gradient(0deg, #D0C6F5 0%, #EABCAA 100%);
		border-radius: 15rpx;
		clip-path: inset(0 round 10rpx);
	}
	.lv_list_view {
		// border: 3rpx dashed #A3B665;
		padding: 10rpx;
		border-radius: 8rpx 8rpx 0 0;
	}

	.list_class {
		margin: 30rpx auto;
		width: 690rpx;

		border: 2rpx solid #9c9c9c75;
		background: #181410;
		box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.79), 4rpx 5rpx 6rpx 0rpx #000000, -2rpx -2rpx 2rpx 0rpx rgba(255, 255, 255, 0.08), 2rpx 2rpx 2rpx 0rpx rgba(255, 255, 255, 0.27), 2rpx 2rpx 142rpx 0rpx rgba(255, 255, 255, 0.1);
		border-radius: 15rpx;
		.list_mess {
			border-radius: 10rpx;

			.list_m {
				display: flex;
				justify-content: space-between;
			}
			.bianhao_m {
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			line-height: 34rpx;
			opacity: 0.5;
			}
			.shijian {
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 34rpx;
				opacity: 0.5;
			}
			.image_sp {
				width: 294rpx;
				height: 290rpx;
				border-radius: 15rpx;
			}

			.xinxi {
				.name_m {
					width: 346rpx;
					font-size: 35rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					line-height: 66rpx;
				}
				.sum_m {
					width: 335rpx;
					font-size: 71rpx;
					font-family: SimHei;
					font-weight: 400;
				}

				.sum_m_color {
					font-family: Source Han Sans SC;
					font-weight: bold;
					font-size: 47rpx;
					color: #FFFFFF;
					background: linear-gradient(110deg, #E9C79A 0%, #FEE5CC 49.8779296875%, #E7BD88 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.xiaqi_m {
					width: 335rpx;
					line-height: 67rpx;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 91rpx;
				}
			}

		}
		// 紫色
		.zhanshi {
			background-color: #fff;
			margin: 0 auto 10rpx;
			padding-bottom: 40rpx;
			width: 638rpx;
			height: 60rpx; // 60rpx;
			line-height: 60rpx;
			text-align: center;
		}

		// 黑色按钮展开
		.black_zhanshi {
			width: 100%;
			text-align: center;
			background: url('@/static/user/menu_icon/jiantou_back.png') no-repeat 99% 94%;
		}
		.image_jaintou {
			margin-top: 10rpx;
			width: 60rpx;
			height: 50rpx;
		}
		.colselist {
			border-radius: 0 0 15rpx 15rpx;
			height: 650rpx;
			margin: 0 auto;
			text-align: center;
		}
		.colse_mess {
			text-align: center;
			width: 335rpx;
			margin: 0 auto;
			height: 80rpx;
			font-size: 29rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			line-height: 67rpx;
		}
		.colse_image {
			width: 340rpx;
			height: 340rpx;
			margin: 10rpx auto;
			background-color: #000;
			line-height: 340rpx;
			border-radius: 20rpx;
			display: grid;
			place-items: center;
			/* 同时实现水平和垂直居中 */
			.ys_image {
				width: 320rpx;
				// height: 320rpx;
				max-width: 218rpx;
				border-radius: 29rpx;
			}
		}
		.chakan_c {
			margin: 18rpx auto;
			width: 220rpx;
			height: 60rpx;
			border-radius: 20rpx;
			line-height: 60rpx;
		}
		.c_jiantou {
			text-align: center;
		}
	}
</style>